<template>
  <div id="tpractice">
    <div class="preview-top">
      <div class="preview-top1">
        <div class="preview-top-content">
          <div v-if="courseTitleData">
            <span class="preview-title">随堂练习</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span class="mr0">{{ courseTitleData.courseName }}</span>
            <span class="preview-line">/</span>
            <span>{{ courseTitleData.chapterName }}</span>
          </div>
          <div v-else>
            <span class="preview-title">随堂练习</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span class="mr0">{{skillName }}</span>
            <span class="preview-line">/</span>
            <span>{{ chapterName }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="jx-content exam-top">
      <div class="exam-top-content" v-if="resQuestionData">
        <!-- 标题，如果是选择题显示多选题或单选题 -->
        <div class="exam-title">
          <span>{{ resQuestionData.typeName }}</span>
          <span v-if="resQuestionData.type === 1">
            <span v-if="resQuestionData.isMultipleChoice">[多选题]</span>
            <span v-if="!resQuestionData.isMultipleChoice">[单选题]</span>
          </span>
        </div>
        <!-- <div class="exam-rightbox">
          <div class="question-tab">
            <el-popover class="question-popover" placement="top-start" title="" width="" trigger="click">
              <el-tabs v-model="tabActiveName" class="question-popover-tab">
                <el-tab-pane v-for="(item,index) in resQuestionData.answerSheetList" :key="index" :name="String(item.type)">
                  <span slot="label">
                    <el-badge :value="item.answerSheetList.length" class="item">{{ item.typeName }}</el-badge>
                  </span>
                  <ul class="question-tab-item clearfix">
                    <li @click="clickQuestion(item2)" :class="{'active':isActive(item2,index2)}" v-for="(item2,index2) in item.answerSheetList" :key="index2">{{ item2.orderNumber }}</li>
                  </ul>
                </el-tab-pane>
              </el-tabs>
              <div class="button-style" slot="reference">答题情况</div>
            </el-popover>
          </div>
          <div @click="submitExam" class="button-style">提交</div>
          <div @click="exitExam" class="button-style">退出随堂练习</div>
        </div> -->
      </div>
    </div>
    <div class="exam-content" v-if="resQuestionData">
      <div class="jian-box">
        <div class="jian-content">
          <div @click="prevQuestion" class="an-question prev-question" :class="{'disabled-question':resQuestionData.orderNumber === 1}"></div>
          <div @click="nextQuestion" class="an-question next-question" :class="{'disabled-question':resQuestionData.orderNumber === resQuestionData.questionCount}"></div>
        </div>
      </div>
      <div class="answer-title">
        <span>{{ resQuestionData.orderNumber }}、</span>
        <span v-html="resQuestionData.content"></span>
        <!-- <span class="c-blue">{{ resQuestionData.score }}分</span> -->
        <!-- 题/共多少题 -->
        <span class="question-num c-blue">{{ resQuestionData.orderNumber }}/{{ resQuestionData.questionCount }}</span>
      </div>
      <!-- answer:[] -->
      <!-- 选择题 -->
      <!-- 答案给序号 [0,1] -->
      <div v-if="resQuestionData.type === 1">
        <!-- 多选题 -->
        <div v-if="resQuestionData.isMultipleChoice">
          <el-checkbox-group v-model="checkList">
            <el-checkbox v-for="(item,index) in resQuestionData.choiceList" :key="index" :label="index" class="jx-content">
              <div class="exam-item-xuan">{{ chose[index] }}</div>
              <div class="exam-item-chose" v-html="item"></div>
            </el-checkbox>
          </el-checkbox-group>
        </div>
        <!-- 单选题 -->
        <div v-if="!resQuestionData.isMultipleChoice">
          <el-radio-group v-model="radio">
            <el-radio v-for="(item,index) in resQuestionData.choiceList" :key="index" :label="index" class="jx-content">
              <template slot-scope="scope">
                <div class="exam-item-xuan">{{ chose[index] }}</div>
                <div class="exam-item-chose" v-html="item"></div>
              </template>
            </el-radio>
          </el-radio-group>
        </div>
      </div>

      <!-- 判断题 -->
      <!-- answer:true -->
      <div v-if="resQuestionData.type === 2">
        <div class="jx-content">
          <el-radio-group v-model="radio2">
            <el-radio :label="true">正确</el-radio>
            <el-radio :label="false">错误</el-radio>
          </el-radio-group>
        </div>
      </div>
      <!-- 填空 -->
      <div class="jx-content fill-content" v-if="resQuestionData.type === 3 && fillList.length">
        <div>请填写答案：</div>
        <span v-show="false">{{ fillStr }}</span>
        <div v-for="(item,index) in fillList" :key="index">
          <span class="row-index">{{ index+1 }}.</span>
          <el-input v-model="fillList[index]"></el-input>
        </div>
      </div>
      <!-- 简答 -->
      <!-- answer:'xxxxx' -->
      <div v-if="resQuestionData.type === 4">
        <div class="jx-content">
          <div>请填写答案：</div>
          <br />
          <mavonEditor ref="answer"></mavonEditor>
        </div>
      </div>
      <div :class="{'cursor-pointer':!isAnswerShow}" @click="isAnswerShow = true" class="jx-content show-answer">
        <span v-if="isAnswerShow" v-html="'答案：'+resQuestionData.rightAnswer"></span>
        <span v-else>
          <i class="iconfont icon-xianshidaan"></i>
          点击显示答案
        </span>
      </div>
      <!-- <div class="btn-group question-change">
        <el-button :disabled="resQuestionData.orderNumber === 1" @click="prevQuestion" class="button-style">上一题</el-button>
        <el-button :disabled="resQuestionData.orderNumber === resQuestionData.questionCount" @click="nextQuestion" class="button-style">下一题</el-button>
      </div> -->
    </div>
  </div>
</template>
<script>
import mavonEditor from "../../../components/mavonEditor";
import axios from "axios";
import $ from "jquery";
export default {
  components: { mavonEditor },
  data() {
    return {
      courseTitleData: "",
      chapterId: this.$route.query.chapterId,
      courseId: this.$route.query.courseId,
      //yx 添加
      skillName: this.$route.query.skillName,
      chapterName: this.$route.query.chapterName,
      //显示答案
      isAnswerShow: false,
      tabActiveName: "2",
      //单选
      radio: "",
      //多选
      checkList: [],
      chose: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"],
      //填空题数组
      fillList: [],
      //判断题
      radio2: "",
      //当前题
      resQuestionData: "",
      timer: null,
      timeLeft: null,
      //下一个题的id
      nextId: "",
      //答案
      answer: "empty"
    };
  },
  computed: {
    //填空题字符串
    fillStr() {
      let that = this;
      if (that.fillList.length) {
        //把学生添加的英文逗号","改为中文逗号"，"
        $.each(that.fillList, function(i, d) {
          that.fillList[i] = d.replace(/,/g, "，"); //把,替换成，
        });
        let result = that.fillList.join(",");
        console.log(result, 222);
        return result;
      }
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    /*
      需求：
        角色：学生
        目的：随堂练习答题
        题型：选择，判断，填空，简答
        逻辑：答题后答题卡对应题答案改变，点击上一题下一题上传答题卡，答题回填，答题卡显示是否已答题，提交后刷新页面进入查看答题情况页面，无法再进入此页
      方法及属性
        1.reSubmitExam() 进入页面前判断是否提交，已提交跳转至SPracticeWatch页面查看答题情况
        2.获取当前题目和答题卡内容 getQuestionAndAnswerSheetListInit()
          2.1.回填已答过内容 fillQuestion()
          2.2.答题卡默认选中第一个题型 tabActiveName
    */
    init() {
      this.getCourseTitleData();
      //进入页面前判断是否提交
      //this.reSubmitExam();
      //关闭页面或浏览器时触发 退出随堂练习
      //window.addEventListener( 'beforeunload', e => this.exitExam() );
      //获取当前题目和答题卡内容
      this.getQuestionAndAnswerSheetListInit();
    },
    //公共接口，考试名称
    getCourseTitleData() {
      let that = this;
      let paperId = that.$route.query.paperId - 0;
      if (that.chapterName) {
        return;
      }
      axios
        .get("/tes/course/" + that.courseId + "/chapter/" + that.chapterId)
        .then(function(res) {
          console.log("成功1");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              console.log(res.data.data, 666);
              that.courseTitleData = res.data.data;
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //验证是否交卷 已交卷页面跳转到考试列表页面
    reSubmitExam() {
      let that = this;
      let paperId = that.$route.query.paperId - 0;
      axios
        .get(
          "/tes/course/" +
            that.courseId +
            "/chapter/" +
            that.chapterId +
            "/practice/status"
        )
        .then(function(res) {
          console.log("成功1");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              //true为已提交 进入SPracticeWatch页面查看提交结果 false为没提交
              let data = res.data.data;
              console.log(data, 11);
              if (data) {
                //进入查看页面
                that.$router.push({
                  path: "/SPracticeWatch",
                  query: {
                    courseId: that.courseId,
                    chapterId: that.chapterId
                  }
                });
              }
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //首次获取当前题目和答题卡内容
    getQuestionAndAnswerSheetListInit() {
      let that = this;
      axios
        ///course/{courseId}/chapter/{chapterId}/practice/
        .get(
          "/tes/course/" +
            that.courseId +
            "/chapter/" +
            that.chapterId +
            "/practice"
        )
        .then(function(res) {
          if (res.status === 200) {
            if (res.data.code === 200) {
              let resQuestionData = res.data.data;
              //查看几个空
              let fillNums = resQuestionData.content.split("(+)").length - 1;

              that.fillList = [];
              for (let i = 0; i < fillNums; i++) {
                that.fillList[i] = "";
              }
              console.log(that.fillList, 88888);

              //填空题替换(+)为（）
              resQuestionData.content = resQuestionData.content.replace(
                /\(\+\)/g,
                "（）"
              );
              that.resQuestionData = resQuestionData;
              //回填
              //that.fillQuestion(that.resQuestionData);
              //tabActiveName默认选中第一个题型
              //that.tabActiveName = String(that.resQuestionData.type);
              console.log(that.tabActiveName, 12222);
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //答题卡判断是否答题
    isActive(item2, index2) {
      //选择
      //多选 checkList:[]
      //单选 radio:''
      //填空 ''
      //判断 radio2:''
      //简答 ''
      //综上 不是空字符串 不是undefined 不是'empty' 是数组并且不是空数组
      //是数组
      let isNull = false;
      if (item2.type === 3 && item2.answer) {
        let fillList = item2.answer.split(",");
        isNull = fillList.some(item => item);
      }
      if (item2.answer instanceof Array) {
        return item2.answer.length;
      } else {
        //不是数组
        return (
          (isNull && item2.answer && item2.answer !== "empty") ||
          item2.answer === false
        );
      }
    },

    //发送答案 reqAnswer传答题卡答案 无返回 成功后执行getQuestionAndAnswerSheetList 重新获取列表
    reqAnswer(row, rowNow) {
      //row为选中题数据
      let that = this;
      //let paperId = that.$route.query.paperId;
      let answerSheetId = that.resQuestionData.answerSheetId;
      let type = that.resQuestionData.type;

      //当前答题往答题卡赋值答案
      //选择
      if (type === 1) {
        let isMultipleChoice = that.resQuestionData.isMultipleChoice;
        if (isMultipleChoice) {
          //多选 checkLis
          rowNow.answer = that.checkList;
        } else {
          //单选 radio
          rowNow.answer = that.radio;
        }
      }
      //判断 radio2 不为空才传答案
      if (type === 2) {
        rowNow.answer = that.radio2;
      }
      //填空
      if (type === 3) {
        rowNow.answer = that.fillStr;
      }
      //填空 简答
      if (type === 4) {
        rowNow.answer = that.$refs.answer.value;
      }
      console.log(that.resQuestionData.answerSheetList, 66666);
      console.log(rowNow, "row");

      //初始化
      //单选
      that.radio = "";
      //多选
      that.checkList = [];
      //判断题
      that.radio2 = "";
      //填空
      that.fillList = [];
      //简答
      if (that.$refs.answer) {
        that.$nextTick(function() {
          that.$refs.answer.changeVal("");
        });
      }
      //答案
      //that.answer = "empty";

      axios
        .post(
          "/tes/course/" +
            that.courseId +
            "/chapter/" +
            that.chapterId +
            "/practice/1",
          that.resQuestionData.answerSheetList
        )
        .then(function(res) {
          console.log("成功1");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              //选题 反答题卡和当前题
              that.getQuestionAndAnswerSheetList(row.id);
            } else {
              that.$message.error(res.data.message);
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //上一题 下一题 选题 获取当前题和答题卡列表
    getQuestionAndAnswerSheetList(rowId) {
      let that = this;
      //初始化
      //单选
      that.radio = "";
      //多选
      that.checkList = [];
      //判断题
      that.radio2 = "";
      //填空
      that.fillList = [];
      //简答
      if (that.$refs.answer) {
        that.$nextTick(function() {
          that.$refs.answer.changeVal("");
        });
      }
      axios
        .get(
          "/tes/course/" +
            that.courseId +
            "/chapter/" +
            that.chapterId +
            "/practice",
          {
            params: { questionId: rowId }
          }
        )
        .then(function(res) {
          console.log("成功1");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              //答案初始化
              that.isAnswerShow = false;
              let resQuestionData = res.data.data;
              //查看几个空
              let fillNums = resQuestionData.content.split("(+)").length - 1;

              that.fillList = [];
              for (let i = 0; i < fillNums; i++) {
                that.fillList[i] = "";
              }
              console.log(that.fillList, 88888);

              //填空题替换(+)为（）
              resQuestionData.content = resQuestionData.content.replace(
                /\(\+\)/g,
                "（）"
              );
              that.resQuestionData = resQuestionData;
              //回填
              //that.fillQuestion(that.resQuestionData);
              //tabActiveName默认选中当前题型

              //that.tabActiveName = String(that.resQuestionData.type);
              //console.log(that.tabActiveName,34444);
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },

    //退出随堂练习
    exitExam() {
      let that = this;
      axios
        .post(
          "/tes/course/" +
            that.courseId +
            "/chapter/" +
            that.chapterId +
            "/practice/exit"
        )
        .then(function(res) {
          console.log("成功1");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              that.$message.success("退出成功");
            } else {
              that.$message.error(res.data.message);
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },

    //上一题 获取答题卡当前题和上一题的row和当前题的rowNow  传答题卡reqAnswer
    prevQuestion() {
      let that = this;
      if (that.resQuestionData.orderNumber === 1) {
        return;
      }
      let resQuestionData = that.resQuestionData;
      let answerSheetList = resQuestionData.answerSheetList;
      //答题卡所有题放在一个数组
      let newAnswerSheetList = answerSheetList
        .map(item => item.answerSheetList)
        .reduce((total, num) => total.concat(num));

      let nowIndex = newAnswerSheetList.findIndex(
        item => item.id === resQuestionData.id
      );
      let row = newAnswerSheetList[nowIndex - 1];
      let rowNow = newAnswerSheetList[nowIndex];
      that.getQuestionAndAnswerSheetList(row.id);
      //传答案 传答题卡 反答题卡
      //this.reqAnswer(row, rowNow);
    },
    //下一题 获取答题卡当前题和下一题的row和当前题的rowNow  传答题卡reqAnswer
    nextQuestion() {
      let that = this;
      if (
        that.resQuestionData.orderNumber === that.resQuestionData.questionCount
      ) {
        return;
      }
      let resQuestionData = that.resQuestionData;
      let answerSheetList = resQuestionData.answerSheetList;
      //答题卡所有题放在一个数组
      let newAnswerSheetList = answerSheetList
        .map(item => item.answerSheetList)
        .reduce((total, num) => total.concat(num));

      let nowIndex = newAnswerSheetList.findIndex(
        item => item.id === resQuestionData.id
      );
      let row = newAnswerSheetList[nowIndex + 1];
      let rowNow = newAnswerSheetList[nowIndex];
      //传答案 传答题卡 反答题卡
      //this.reqAnswer(row, rowNow);
      that.getQuestionAndAnswerSheetList(row.id);
    },
    //点击答题卡选题 获取答题卡点击题的row和当前题的rowNow 传答题卡reqAnswer
    clickQuestion(row) {
      let that = this;
      //在答题卡中获取当前题对象
      let type = that.resQuestionData.type;
      //在答题卡中查找当前题的数据rowNow
      let rowNow = that.resQuestionData.answerSheetList
        .find(item => item.type === type)
        .answerSheetList.find(item2 => item2.id === that.resQuestionData.id);

      //传答案 传答题卡
      //this.reqAnswer(row, rowNow);
      that.getQuestionAndAnswerSheetList(row.id);
    },

    //回填答案
    fillQuestion(resQuestionData) {
      console.log("回填");
      let that = this;
      let id = resQuestionData.id;
      let type = resQuestionData.type;
      console.log(resQuestionData, 1234);
      //回填，有值才回填
      if (
        //存在
        (resQuestionData.answer !== undefined &&
          //非空
          resQuestionData.answer !== "") ||
        //数组非空
        (Array.isArray(resQuestionData.answer) &&
          resQuestionData.answer.length !== 0)
      ) {
        //选择
        if (type === 1) {
          //多选
          if (resQuestionData.isMultipleChoice) {
            that.checkList = resQuestionData.answer;
          } else {
            //单选
            that.radio = resQuestionData.answer;
          }
        }
        //判断
        if (type === 2) {
          that.radio2 = resQuestionData.answer;
        }
        //填空
        if (type === 3) {
          let fillAnswers = resQuestionData.answer.split(",");
          $.each(that.fillList, function(i, d) {
            that.fillList[i] = fillAnswers[i];
          });
        }
        //简答
        if (type === 4) {
          console.log(resQuestionData.answer, 23445);
          that.$nextTick(function() {
            that.$refs.answer.changeVal(resQuestionData.answer);
          });
        }
      }
    },

    //交卷传当前题答案
    submitReqAnswer() {
      //row为选中题数据
      let that = this;
      //在答题卡中获取当前题对象
      let type = that.resQuestionData.type;
      //在答题卡中查找当前题的数据rowNow
      let rowNow = that.resQuestionData.answerSheetList
        .find(item => item.type === type)
        .answerSheetList.find(item2 => item2.id === that.resQuestionData.id);
      //let paperId = that.$route.query.paperId;
      let answerSheetId = that.resQuestionData.answerSheetId;

      //当前答题往答题卡赋值答案
      //选择
      if (type === 1) {
        let isMultipleChoice = that.resQuestionData.isMultipleChoice;
        if (isMultipleChoice) {
          //多选 checkLis
          rowNow.answer = that.checkList;
        } else {
          //单选 radio
          rowNow.answer = that.radio;
        }
      }
      //判断 radio2 不为空才传答案
      if (type === 2) {
        rowNow.answer = that.radio2;
      }
      //填空
      if (type === 3) {
        rowNow.answer = that.fillStr;
      }
      //填空 简答
      if (type === 4) {
        rowNow.answer = that.$refs.answer.value;
      }
      console.log(that.resQuestionData.answerSheetList, 66666);
      console.log(rowNow, "row");

      axios
        .post(
          "/tes/course/" +
            that.courseId +
            "/chapter/" +
            that.chapterId +
            "/practice/1",
          that.resQuestionData.answerSheetList
        )
        .then(function(res) {
          console.log("成功1");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              console.log("交卷传答案成功");
            } else {
              that.$message.error(res.data.message);
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //交卷 传答题卡答案 页面跳转回考试列表页面
    submitExam() {
      //row为选中题数据
      let that = this;
      let answerSheetId = that.resQuestionData.answerSheetId;
      that.submitReqAnswer();
      axios
        .post(
          "/tes/course/" +
            that.courseId +
            "/chapter/" +
            that.chapterId +
            "/practice/2",
          that.resQuestionData.answerSheetList
        )
        .then(function(res) {
          console.log("成功1");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              that.$message.success("提交成功");
              //进入考试页面
              that.$router.push({
                path: "/Teaching/MyCourses/CourseDetail"
              });
            } else {
              that.$message.error(res.data.message);
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    }
  }
};
</script>
<style lang="scss">
@import "../../../styles/layout/color_variables";
#tpractice {
  img{
    max-width: 100%;
  }
  .jian-box {
    position: fixed;
    width: 1000px;
    height: 49px;
    top: 350px;
    .jian-content {
      position: relative;
      .an-question {
        width: 27px;
        height: 49px;
        position: absolute;
        top: 0;
        background: url("../../../assets/images/jian.png") no-repeat 0 0;
        cursor: pointer;
        &:hover {
          background: url("../../../assets/images/jian-hover.png") no-repeat 0 0;
        }
      }
      .disabled-question {
        cursor: no-drop;
        &:hover {
          background: url("../../../assets/images/jian.png") no-repeat 0 0;
        }
      }
      .prev-question {
        left: -80px;
      }
      .next-question {
        right: -80px;
        transform: rotate(180deg);
      }
    }
  }
  .jx-content {
    width: 1000px;
  }
  .fullscreen {
    top: 162px;
  }
  //修改按钮默认样式
  .el-button:focus {
    background-color: #fff;
    color: $btn-blue;
    border-color: $btn-blue;
  }
  .el-button:hover {
    background-color: $btn-blue;
    color: #fff;
    border-color: $btn-blue;
  }
  .show-answer {
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: $blue;
    padding: 20px 40px;
    min-height: 76px;
  }
  .show-answer.jx-content{
    margin: 0 auto 20px;
  }
  .mr0 {
    margin-right: 0 !important;
  }
  .preview-top {
    position: relative;
    z-index: 2;
    height: 180px;
    margin: 0px auto 0;
    .preview-top1 {
      width: 100%;
      height: 80px;
      line-height: 80px;
      background: #101937;
      position: fixed;
      top: 0;
      color: #fff;
      font-size: 14px;
      .preview-top-content {
        width: 1200px;
        margin: 0 auto;
        span {
          margin-right: 40px;
        }
        .preview-title {
          font-size: 18px;
          margin-right: 0;
        }
        .preview-line {
          margin: 0 6px;
        }
      }
    }
    .preview-top2 {
      margin-top: 0;
      width: 100%;
      line-height: 80px;
      position: fixed;
      top: 80px;
      padding: 0;
      font-size: 14px;
      .preview-top-content {
        width: 1200px;
        margin: 0 auto;
        padding: 0 40px;
        .button-style {
          margin-left: 20px;
        }
        .preview-score {
          width: 80px;
          input {
            width: 80px;
          }
        }
      }
      .preview-top-content2 {
        width: 1200px;
        margin: 0 auto;
        line-height: 30px;
        padding-bottom: 30px;
      }
    }
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .fill-content {
    > div {
      padding: 10px;
    }
    .row-index {
      margin-right: 20px;
    }
    .el-input {
      width: 80%;
      input {
        width: 100%;
      }
    }
  }
  p {
    line-height: inherit;
    display: inline;
  }
  label.el-checkbox.jx-content,
  label.el-radio.jx-content {
    margin-left: 0;
    display: flex;
    white-space: normal;
    .el-checkbox__input,
    .el-radio__input {
      padding-top: 8px;
    }
    .el-checkbox__label {
      display: flex;
      font-size: 0;

      .exam-item-xuan {
        padding: 6px;
        font-size: 16px;
      }
    }
    .el-radio__label {
      display: flex;
      font-size: 0;
      .exam-item-xuan {
        padding: 0 6px;
        font-size: 16px;
      }
    }
    .exam-item-chose {
      line-height: 30px;
      font-size: 16px;
    }
  }
  .exam-top {
    width: 100%;
    padding: 0;
    position: fixed;
    top: 80px;
    z-index: 2;
    margin-top: 0;
    .exam-top-content {
      width: $width;
      margin: 0 auto;
      padding: 0 40px;
      line-height: 80px;
      display: flex;
      justify-content: space-between;
      .exam-title {
        border-bottom: 2px solid $blue;
        color: $blue;
        display: inline-block;
        font-size: 16px;
        font-weight: bold;
      }
      .exam-rightbox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        > div {
          margin-left: 10px;
        }
        .question-tab {
        }
      }
    }
  }
  .exam-content {
    width: 1000px;
    margin: 0px auto 0;
    position: relative;
    z-index: 1;
    .answer-title {
      position: relative;
      line-height: 32px;
      font-size: 16px;
      padding: 30px 40px;
      font-weight: bold;
      .c-blue {
        margin: 0 0 0 10px;
        font-weight: normal;
      }
      .question-num{
        position:absolute;
        min-width:60px;
        left:1000px;
        top:30px;
      }
    }
    .question-item {
      margin-left: 42px;
      display: flex;
      .question-chose {
        &:after {
          content: "：";
        }
      }
      .question-item {
        flex: 1;
      }
    }
  }
}
.question-change {
  text-align: center;
  margin: 50px 0 0 0;
  .button-style {
    width: 280px;
    height: 49px;
    line-height: 49px;
    border-radius: 49px;
    font-size: 16px;
    margin: 0 10px;
  }
}
//悬浮框内容
.tab-popper.el-popper {
  width: 440px;
  box-sizing: border-box;
  padding: 0 16px 20px;
  position: relative;
  .el-badge__content {
    top: 14px;
  }
  .el-tabs__nav {
    padding: 0 20px;
  }
  .el-tabs__active-bar {
    left: 10px;
    padding: 0 10px;
    width: 42px !important;
    background-color: $blue;
  }
  .el-tabs__item {
    height: 46px;
    line-height: 46px;
  }
  .el-tabs__item:hover,
  .el-tabs__item.is-active {
    color: $blue;
  }
  .question-tab-item {
    padding: 20px 0 0 40px;
    li {
      cursor: pointer;
      position: relative;
      width: 22px;
      height: 23px;
      line-height: 23px;
      margin: 0 20px 20px 0;
      text-align: center;
      float: left;
      border: 1px solid #8e8e8e;
      color: #8e8e8e;
    }
    li.active {
      border-color: $blue;
      color: $blue;
      &:after {
        position: absolute;
        content: "\e614";
        bottom: -7px;
        font-family: "iconfont";
        color: #3fdb9b;
        background: #fff;
        line-height: 14px;
      }
    }
  }
}
</style>
